<template>
  <div class="dialog">
    <el-dialog
      :title="'基础告警'+titleText"
      :visible.sync="showDialog"
      width="55%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-form
        ref="ruleForm"
        label-position="left"
        :model="formData"
        class="el-form"
      >
        <el-form-item label="告警名称:" class="w50p">
          <el-input v-model="formData.thresholdAlarmName" disabled />
        </el-form-item>
        <el-form-item label="监测数据项:" class="w50p">
          <el-select
            v-model="formData.dataItemId"
            filterable
            clearable
            disabled
            :placeholder="formData.dataItemId"
            @change="changeDataItem"
          >
            <el-option
              v-for="(item,index) in dataItemList"
              :key="index"
              :value="item.dataItemId"
              :label="item.dataItemName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设备选择:" class="w50p">
          <el-select v-model="formData.equipmentCode" filterable clearable disabled placeholder="请选择设备名称">
            <el-option
              v-for="item of equipmentArr"
              :key="item.equipmentCode"
              :label="item.equipmentName"
              :value="item.equipmentCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="滤波类型:" class="w50p">
          <el-select
            v-model="formData.filteringType"
            clearable
            filterable
            disabled
            placeholder="请选择滤波类型"
          >
            <el-option
              v-for="(item,index) in filteringTypeList"
              :key="index"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="滤波值:" class="w50p">
          <el-input
            v-model="formData.filteringValue"
            clearable
            disabled
            placeholder="请输入滤波值"
          />
        </el-form-item>
        <el-form-item label="上限列表:" class="w100p">
          <div class="line-hang">
            <!-- <div class="line-click" @click="addtopList()">
              <i class="el-icon-plus"></i>
            </div> -->
            <div class="line-hang-con">
              <div v-for="(item,indexA) in basetopList" :key="indexA+'top'" class="line">
                <el-input
                  v-model="basetopList[indexA].alarmLimitName"
                  clearable
                  disabled
                  placeholder="级别名称"
                />
                <el-input
                  v-model="basetopList[indexA].alarmLimitValue"
                  clearable
                  disabled
                  placeholder="级别阈值"
                />
              </div>
            </div>

          </div>
        </el-form-item>
        <el-form-item label="下限列表:" class="w100p">
          <div class="line-hang">
            <div class="line-hang-con">
              <div v-for="(item,index) in basebottomList" :key="index" class="line">
                <el-input
                  v-model="basebottomList[index].alarmLimitName"
                  clearable
                  disabled
                  placeholder="级别名称"
                />
                <el-input
                  v-model="basebottomList[index].alarmLimitValue"
                  disabled
                  clearable
                  placeholder="级别阈值"
                />
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        <el-button type="primary" class="savebtn" @click="save('ruleForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import basicAlarmConfigurationApi from "@/api/monitoring-alarm/basic-alarm-configuration"

export default {
  name: '',
  components: { },
  props: {
    // 弹框名称
    titleText: {
      type: String,
      default: ""
    },
    nowChanceStau: {
      type: String,
      default: ""
    },
    show: {
      type: Boolean,
      default: false
    },
    editObject: {
      type: [Object],
      default: () => {
        return {}
      }
    },
    equipmentArr: {
      type: [Array],
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      formData: {},
      rules: {
        thresholdAlarmName: [
          { required: true, message: "请输入告警名称", trigger: ["change", "blur"] }
        ],
        dataItemId: [
          { required: true, message: "请选择监测数据项", trigger: ["change", "blur"] }
        ],
        equipmentCode: [
          { required: true, message: "请选择设备选择", trigger: ["change", "blur"] }
        ],
        filteringValue: [
          { required: true, message: "请输入滤波值", trigger: ["change", "blur"] }
        ],
        filteringType: [
          { required: true, message: "请输入滤波值", trigger: ["change", "blur"] }
        ]
      },
      showDialog: this.show,
      // 数值告警时
      dataItemList: [],
      // 告警模板
      nowalarmTemplateId: "",
      alarmTemplateList: [],
      // 联系人可选择列表
      contactTemplateArr: [],
      // 上限列表
      basetopList: [{
        alarmLimitName: '',
        alarmLimitType: 0,
        alarmLimitValue: ''
      }],
      // 下限列表
      basebottomList: [{
        alarmLimitName: '',
        alarmLimitType: 1,
        alarmLimitValue: ''
      }],
      filteringTypeList: [
        {
          name: "时间",
          id: 'TIME'
        },
        {
          name: "次数",
          id: 'NUMBER'
        }
      ]
    };
  },

  watch: {
    show(v) {
      this.showDialog = v;
    },
    nowChanceStau(v) {
      if (v === 'detail') {
        this.formData = this.editObject
        this.basetopList = []
        this.basebottomList = []
        this.queryAlarm(this.formData.thresholdAlarmCode)
        this.changeDataItem(this.formData.dataItemId)
      }
    }
  },
  created() {
  },
  mounted() {
    this.queryTemplateList()
  },
  methods: {
    // 查看已配置告警详情
    queryAlarm(thresholdAlarmCode) {
      basicAlarmConfigurationApi.query(thresholdAlarmCode).then(
        res => {
          if (res.code === 1) {
            let data = res.data.alarmLimitList
            // 上限列表和下限列表的赋值
            data.forEach(a => {
              if (a.alarmLimitType === 'SUPERIOR_LIMIT') {
                a.alarmLimitType === 0
                this.basetopList.push(a)
              }
              if (a.alarmLimitType === 'LOWER_LIMIT') {
                a.alarmLimitType === 1
                this.basebottomList.push(a)
              }
            });
          }
        })
    },

    // 获取下拉数据
    queryTemplateList() {
      // 获取可选择模板
      // alarmTemplateConfigurationApi.queryList().then(
      //   res => {
      //     this.alarmTemplateList = res.data
      //     this.changeTemplate(this.alarmTemplateList[0].alarmTemplateId)
      //   }
      // )
    },
    // // 选择模板
    // changeTemplate(e) {
    //   if (this.nowalarmTemplateId > 0) {
    //     this.changeTemplateList(e)
    //   }
    // },
    // // 选择模板时的数据处理
    // changeTemplateList(data) {
    //   this.formData = {}
    //   let row = JSON.parse(JSON.stringify(data))
    //   if (row.alarmTemplateCode) {
    //     this.formData = {
    //       alarmTemplateCode: row.alarmTemplateCode,
    //       thresholdAlarmName: row.thresholdAlarmName,
    //       equipmentCode: row.equipmentCode,
    //       filteringValue: row.filteringValue,
    //       filteringType: row.filteringType,
    //       contactTemplateCode: row.contactTemplateCode
    //     }
    //     alarmTemplateConfigurationApi.query(row.alarmTemplateCode).then(
    //       res => {
    //         let data = res.data.alarmLimitList || []
    //         // 上限列表和下限列表的赋值
    //         if (data.length > 0) {
    //           data.array.forEach(a => {
    //             if (a.alarmLimitType === 'SUPERIOR_Limit') {
    //               a.alarmLimitType === 0
    //               this.basetopList.push(a)
    //             }
    //             if (a.alarmLimitType === 'LOWER_LIMIT') {
    //               a.alarmLimitType === 1
    //               this.basebottomList.push(a)
    //             }
    //           });
    //         }
    //       }
    //     )
    //   }
    // },
    // 选择数据项
    
    changeDataItem(dataItemId) {
      var index = this.dataItemList.findIndex(a => a.dataItemId === dataItemId)
      if (index !== -1) {
        this.formData["dataItemName"] = this.dataItemList[index].dataItemName
      } else {
        this.formData["dataItemName"] = ''
      }
    },
    // 添加一条上限数据
    addtopList() {
      let addvalue = {
        alarmLimitName: '',
        alarmLimitType: 0,
        alarmLimitValue: ''
      }
      this.basetopList.push(addvalue)
    },
    // 删除一条上限数据
    deltopList(i) {
      this.basetopList.splice(i, 1)
    },
    // 添加一条下限数据
    addbottomList() {
      let addvalue = {
        alarmLimitName: '',
        alarmLimitType: 1,
        alarmLimitValue: ''
      }
      this.basebottomList.push(addvalue)
    },
    // 添加一条下限数据
    delbottomList(i) {
      this.basebottomList.splice(i, 1)
    },
    save() {
      if (this.nowChanceStau === 'edit') {
        let editparams = {
          alarmLimitList: [
            // 上限数据
            this.basetopList,
            // 下限数据
            this.basebottomList
          ],
          ...this.formData
        }
        // 编辑接口
        basicAlarmConfigurationApi.edit(editparams).then(res => {
          if (res.code === 1) {
            this.$message.success("修改成功！");
            this.close();
          } else {
            this.$message.error(res.msg);
          }
        });
      } else if (this.nowChanceStau === 'add') {
        let addparams = {
          alarmLimitList: [
            // 上限数据
            this.basetopList,
            // 下限数据
            this.basebottomList
          ],
          // 下面时一些与其他数据
          ...this.formData
        }
        basicAlarmConfigurationApi.add(addparams).then(res => {
          if (res.code === 1) {
            this.$message.success(res.msg);
            this.close();
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    close() {
      this.$emit("closeDialog");
    },
    cancel() {
      this.$emit("cancelDialog");
    }
  }
};
</script>

<style lang="scss" scoped>
.line-hang{
  width: 100%;
  display: flex;
}
.line-hang-con{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.line{
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
}
.line-click{
    min-width: 30px;
    height: 30px;
    // background-color: aqua;
    display: flex;
    justify-content: center;
    align-items: center;
    border: snow 1px solid;
    border-radius: 50%;
    margin-bottom: 10px;
    margin-top: 5px;
    margin-left: 5px;
    color:#fff;
    background-color:#003947 ;
    cursor: pointer;
  }
</style>
